<template>
    <div class="container">
        <div class="container MuiPaper-elevation2-346 MuiPaper-rounded-343 ">
            <div class="handle-box">
                <div class="EnhancedTableToolbar-title-373">
                    <div>order节点
                        <el-button class="mr10" type="primary" @click="actionDialogVis=true"><el-icon>
                                <Plus />
                            </el-icon>添加ORDER</el-button>
                    </div>
                </div>
            </div>
            <el-table :data="tableData" border class="table" header-cell-class-name="table-header">
                <el-table-column prop="name" label="名称" align="center"></el-table-column>
                <el-table-column prop="type" label="账本类型"></el-table-column>
                <el-table-column prop="ip" label="IP地址" width="200"></el-table-column>
                <el-table-column prop="port" label="端口"></el-table-column>
                <el-table-column prop="id" label="MSP ID"></el-table-column>
                <el-table-column prop="league" label="联盟"></el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template #default="scope">
                        <el-button type="primary" key="primary" @click="deleteItem(scope.$index)">删除</el-button>
                        <el-button type="primary" key="primary" @click="infoDialog(scope.$index)">详情</el-button>
                        <el-button type="primary" key="primary" @click="goToConsole(scope.$index)">控制台</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog title="order节点" v-model="actionDialogVis" width="40%">
            <el-form ref="formRef" :model="form" label-width="120px">
                <el-form-item label="节点名称*" prop="name">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="节点类型" prop="type">
                    <el-select v-model="form.type">
                        <el-option label="solo" value="solo"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账本类型" prop="orderType">
                    <el-select v-model="form.orderType">
                        <el-option label="file" value="file"></el-option>
                        <el-option label="json" value="json"></el-option>
                        <el-option label="ram" value="ram"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="ip地址*" prop="ip">
                    <el-input v-model="form.ip" />
                </el-form-item>
                <el-form-item label="端口*" prop="port">
                    <el-input v-model="form.port" />
                </el-form-item>
                <el-form-item label="MSP名称*" prop="port">
                    <el-select v-model="form.id">
                        <el-option v-for="item in orgList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联盟*" prop="port">
                    <el-select v-model="form.league">
                        <el-option v-for="item in leagueList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="handleAdd">添 加</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="infoDialogVisible" width="40%">
            <el-descriptions title="查看order节点" direction="horizontal" column="1" border>
                <el-descriptions-item label="节点名称*">{{ form.name }}</el-descriptions-item>
                <el-descriptions-item label="节点类型">{{ form.orderType }}</el-descriptions-item>
                <el-descriptions-item label="账本类型">{{ form.type }}</el-descriptions-item>
                <el-descriptions-item label="IP地址*">{{ form.ip }}</el-descriptions-item>
                <el-descriptions-item label="端口*">{{ form.port }}</el-descriptions-item>
                <el-descriptions-item label="MSP名称*">{{ form.id }}</el-descriptions-item>
                <el-descriptions-item label="联盟*">{{ form.leaguels }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
import { useRouter } from "vue-router";
import { useOrderNodeStore } from "../store/orderConsole";

const tableData = ref([]) as any;
const leagueList = ref([]) as any;
const orgList = ref([]) as any;

const router = useRouter();

const orderNodeStore = useOrderNodeStore();           //peer节点store

onMounted(() => {
    loadData();
    loadLeague();
    loadMSP();
})

// 加载表格数据
const data = reactive([]) as any;
const loadData = () => {
    tableData.value = [];
    axios.get('prefix/api/entity/orderers', {
    }).then(function (response) {
        data.value = response.data.orderers;
        for (let i = 0; i < data.value.length; i++) {
            tableData.value.push({
                name: data.value[i].Name,
                type: data.value[i].LedgerType,
                ip: data.value[i].ListenAddress,
                port: data.value[i].ListenPort,
                id: data.value[i].LocalMSPID,
                league: data.value[i].Consortiums
            })
        }
    })
}

const loadLeague = () => {
    leagueList.value = [];
    axios.get('/prefix/api/entity/consortiums').then(function (response) {
        const list = response.data.consortiums;
        for (let i = 0; i < list.length; i++) {
            leagueList.value.push({
                label: list[i].Name,
                value: list[i].Name
            })
        }
    })
}

const loadMSP = () => {
    orgList.value = [];
    axios.get('prefix/api/entity/organizations').then(function (response) {
        const list = response.data.organizations;
        for (let i = 0; i < list.length; i++) {
            orgList.value.push({
                label: 'order.' + list[i].CommonName,
                value: 'order.' + list[i].CommonName
            })
        }
        // console.log(orgList.value)
    })
}

// 初始化表格
const actionDialogVis = ref(false);
const form = reactive({
    name: "",
    type: "",
    ip: "",
    port: "",
    id: "",
    league: "",
    leaguels: [] as any,
    orderType: ""
})
const handleAdd = () => {
    // console.log(form.name)
    form.leaguels.push(form.league)
    // console.log(form.leaguels)
    axios.post('/prefix/api/entity/orderers/' + form.name, {
        Name: form.name,
        LedgerType: form.type,
        ListenAddress: form.ip,
        ListenPort: Number(form.port),
        LocalMSPID: form.id,
        Consortiums: form.leaguels,
        OrdererType: form.orderType
    }).then(function (value) {
        console.log(value);
        ElMessage.success("添加成功");
        actionDialogVis.value = false;
        loadData();
    }).catch(function (reason) {
        console.log(reason);
        ElMessage.error("添加失败");
    })
}

// 删除节点
const deleteItem = (index) => {
    axios.delete('prefix/api/entity/orderers/' + tableData.value[index].name, {
    }).then(function (response) {
        // console.log(response)
        ElMessage.success("删除成功");
        loadData();
    }).catch(function (error) {
        console.log(error);
    })
}

// 查看节点
const infoDialogVisible = ref(false);
const infoDialog = (index) => {
    infoDialogVisible.value = true;
    axios.get('prefix/api/entity/orderers/' + tableData.value[index].name, {
    }).then(function (response) {
        console.log(response.data)
        form.name = response.data.Name;
        form.type = response.data.LedgerType;
        form.ip = response.data.ListenAddress;
        form.port = response.data.ListenPort;
        form.id = response.data.LocalMSPID;
        form.leaguels = response.data.Consortiums;
        form.orderType = response.data.OrdererType;
    })
}

// 跳转到控制台
const goToConsole = (index) => {
    orderNodeStore.setOrderNodeName(tableData.value[index].name);
    router.push('/ordererConsole');
}
</script>
  
<style scoped>
.table {
    width: 100%;
    font-size: 14px;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.mr10 {
    margin-right: 10px;
}

.EnhancedTableToolbar-title-373 {
    flex: 0 0 auto;
}

.handle-box {
    margin-bottom: 20px;
}

.MspTable-root-444 {
    margin-top: 24px;
}

.MuiPaper-elevation2-346 {
    box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 3px 1px -2px rgb(0 0 0 / 12%);
}

.MuiPaper-rounded-343 {
    border-radius: 4px;
}
</style>
  